<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" href="styles/styleFile.css" />
<script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$('document').ready(
			function() {

				//$('.right').hide();

				$('#slideButton').click(
						function() {

							var hiddenOne = document.getElementById("mainOne");
							var hiddenTwo = document.getElementById("mainTwo");
							var styleTwo = window.getComputedStyle(hiddenTwo,
									null).getPropertyValue("display");

							if (styleTwo == "none") {
								$('#mainTwo').fadeIn();
								$('#mainTwo').animate({
									left : "11.5%"
								}, 2000);
								$('#mainOne').hide();
							} else {
								$('#mainOne').fadeIn();
								$('#mainOne').animate({
									left : "11.5%"
								}, 2000);
								;
							}
						});

			});
</script>

</head>

<body>

	<div id="sideDiv">
		<button title="The slider" id="slideButton">Slide the page</button>
		<nav>
			<a id="pull outBlue">Hover blue</a> <a id="pull outRed">Hover red</a>
		</nav>
	</div>

	<div id="mainOne" class="right"></div>
	<div id="mainTwo" class="right">Checking out jQuery source, it
		looks like 'toggle' was designed for effects that are either entirely
		shown or hidden (like height, width, and opacity). What happens is
		that clicking 'Click me :-)' and animating something not hidden for
		the first time has the same effect as if you had marginBottom: 'hide'.
		So when it is done animating, jQuery( elem ).hide(); is called on your
		element</div>
</body>

</html>




